<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head class="fly-header layui-bg-black" th:include="admin/header.html :: head"></head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm" class="demo"></table>
      <script type="text/html" id="layuiadmin-app-cont-tagsbar2">
        <input type="checkbox"  name="open" value="{{d.userId}}" lay-skin="switch" lay-filter="Sex" lay-text="男|女" {{ d.sex == 0 ? 'checked' : '' }}>
      </script>
      <script type="text/html" id="imgTpl">
        <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.head }}>
      </script>
      <script type="text/html" id="layuiadmin-app-cont-tagsbar1">
        <input type="checkbox"  name="open" value="{{d.userId}}" lay-skin="switch" lay-filter="Status" lay-text="通过|锁定" {{ d.userState == 2 ? 'checked' : '' }}>
      </script>
      <script type="text/html" id="table-content-com-update">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改密码</a>
      </script>
    </div>
  </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table'], function(){
    var $ = layui.$
            ,form = layui.form
            ,table = layui.table;


    //监听搜索
    form.on('submit(LAY-app-contcomm-search)', function(data){
      var field = data.field;
    });

    table.render({
      elem: '.demo'
      ,url: '/user/userList',
      page: true //开启分页
      ,title: '用户数据表'
      ,cols: [
        [
          {type: 'checkbox',width:40},
          {field:'userId', title:'用户ID', width:80,align:'center',unresize:true},
          {field:'account', title:'用户账号', width: 200,align:'center',unresize:true},
          {field:'nickname', title:'用户昵称', width: 100,align:'center',unresize:true},
          {field:'sex', title:'性别', width: 100,align:'center',toolbar:'#layuiadmin-app-cont-tagsbar2',unresize:true},
          {field:'head', title:'头像', width: 100,align:'center',toolbar: '#imgTpl',unresize:true},
          {field:'experience', title:'经验', width: 80,align:'center',unresize:true},
          {field:'phone', title:'手机号', width: 155,align:'center',unresize:true},
          {field:'userState', title:'状态', width: 100,align:'center',toolbar:'#layuiadmin-app-cont-tagsbar1',unresize:true},
          {field:'userCreatedTime', title:'创建时间', width:170,align:'center',unresize:true},
          {field:'right', title:'操作',toolbar:'#table-content-com-update',unresize:true, align:'center',width: 120},
        ]
      ]
      ,limits: [5,10,20,50,100,200,500]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
      ,limit: 10 //每页默认显示的数量
    });
    //修改性别
    form.on('switch(Sex)', function(obj){
      var userId = this.value;
      var sex = obj.elem.checked?0:1;
      //请求接口
      $.post('/user/sexStatus',{
        "userId":userId,
        "sex":sex
      },'json');
    });
    //审核
    form.on('switch(Status)', function(obj){
      var userId = this.value;
      var userState = obj.elem.checked?2:3;
      //请求接口
      $.post('/user/userStatus',{
        "userId":userId,
        "userState":userState
      },'json');
    });
    //监听行工具栏
    table.on('tool(LAY-app-content-comm)',function (obj) {
      //获取行数据
      var data = obj.data;
        if (obj.event === 'edit'){
        //点击编辑
        layer.open({
          //打开子窗口
          type: 2
          ,title: '修改密码',
          data:data
          ,content: '/user/updatepass'
          ,area: ['450px', '300px'],
          btn: ['确定', '取消']  ,
          success:function (layero, index) {
            //打开子窗口后通过success赋值,两个变量基本是固定写法
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']];
            //给子窗口中的元素赋值
          },yes: function(index, layero){
            //模板自带,固定写法,要注意子窗口中的提交按钮id对应submitID
            var iframeWindow = window['layui-layer-iframe'+ index]//得到iframe页的窗口对象，执行iframe页的方法：
                    ,submitID = 'LAY-user-role-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
            var body = layer.getChildFrame('body', index);
            var pass = body.find('input[name="pass"]').val()
            var repass = body.find('input[name="repass"]').val()
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(obj){
              $.ajax({
                url:'/user/rePassword',
                data:{"userId":data.userId,"pass":pass,"repass":repass},
                dataType:'json',
                method:'post',
                success:function(data){
                  if (data.code == 0) {
                    layer.msg("修改成功");
                  }else if (data.code == 1){
                    layer.msg("新密码与确认密码不同");
                  }else if (data.code == 3){
                    layer.msg("新密码与当前密码相同");
                  }else if (data.code == 4){
                    layer.msg("新密码不符合要求");
                  }else {
                    layer.msg("服务器繁忙");
                  }
                },
                error:function(data){
                  layer.msg("服务器繁忙，请稍后再试");
                }
              });
              layer.close(index); //关闭弹层
            });
            submit.trigger('click');
          }
        });
      }
    })

    $('.layui-btn.layuiadmin-btn-comm').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
</body>
</html>
